<template>
    <div class='contentUi'>
        <span class="label">{{label}}</span>
        <div class="components">
            <el-select v-model="grade" placeholder="请选择"  clearable >
                <el-option
                    v-for="item in gradeoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            </el-form>
        </div>
    </div>
</template>

<script>
   import {mapState,mapMutations} from 'vuex';
   import {gradeoptions} from '@/static/js/select_data.js';
   export default {
    data() {
        return {
            label: '年级',
            grade:''
        }
    },
    computed: {
        gradeoptions(){
            return gradeoptions;
        },
        //测试数据是否传输
        ...mapState({
            getInput_grade:state => state.pubilcModule.input_grade
        })
        
    },
    watch: {
        grade(){
            this.setInput_grade(this.grade);
        },
        getInput_grade(){
            //监听重置
            if(this.getInput_grade === ''){
                this.grade = '';
            }
        },
    },
    methods: {
        ...mapMutations({
            setInput_grade:'pubilcModule/setInput_grade'
        })
    },
   }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
